<template>
  <div class='echart' ref="chartDom" :style="{height:height}"></div>
</template>

<script setup lang='ts' scoped>
import { inject, ref, onMounted, watch } from 'vue'

import * as echarts from "echarts";
const chartDom = ref(null)
const  props = defineProps({
  options:{
      type:Object,
      default:{},
      required:true
  },
  height:{
    type: String,
    default:'200px'
  }
})
let myChart: {
    on(arg0: string, arg1: (params: any) => void): unknown;
  resize: () => void;
  setOption: (arg0: Record<string, any>, arg1: boolean | undefined) => void;
};
const resizeHandler = () => {
  myChart.resize()
}

const emit=defineEmits(['chart-click'])

onMounted(() => {
  setTimeout(()=>{
      myChart = echarts.init(chartDom.value)
      myChart.setOption(props.options, true)

    myChart.on('click', function(params: any) {
      emit('chart-click',params)
      // 处理点击事件
    });
      window.addEventListener('resize', resizeHandler)
  })
})
watch(() => props.options, (newOptions) => {
  myChart.setOption(newOptions)
},{
  deep: true
})
</script>

<style lang='scss' scoped>
.echart {
  margin: 10px;
  /*
  min-width: 500px;
  */
}
</style>
